<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>好农</title>
		 <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
        <link rel="stylesheet" href="../css/loaders.css"/>
		<style>

			.swiper-slide img {
				display: block;
				width: 100%;
                min-width: 300px;
			}
			.swiper-pagination-bullet-active {
				background-color: #6ac82c;
			}
			.three-icon {
				display: -webkit-box;
				display: box;
				padding: 15px 15px;
				background-color: #f8f8f8;
				position: relative;
			}
			.three-icon div {
				-webkit-box-flex: 3;
				box-flex: 3;
				text-align: center;
			}
			.three-icon div span {
				display: inline-block;
				width: 50px;
				height: 50px;
			}
			.three-icon div:nth-child(1) span {
				background: url('../image/three-icon1.png') center no-repeat;
				background-size: cover;
			}
			.three-icon div:nth-child(2) span {
				background: url('../image/three-icon2.png') center no-repeat;
				background-size: cover;
			}
			.three-icon div:nth-child(3) span {
				background: url('../image/three-icon3.png') center no-repeat;
				background-size: cover;
			}
			.three-icon div p {
				color: #666;
				font-size: 13px;
			}
			.content-padded {
				padding: 0 10px;
			}
			.title {
				overflow: hidden;
				margin: 15px 0 0;
			}
			.title .aui-pull-left {
				border-left: 3px solid #6ac82c;
				padding-left: 10px;
				color: #333;
				line-height: 18px;
				margin-top: 3px;
			}
			.title .aui-pull-right {
				color: #6ac82c;
				font-size: 12px;
				line-height: 24px;
			}
			.title .aui-pull-right span {
				font-size: 12px;
				line-height: 24px;
			}
			.list-view {
				display: -webkit-box;
				display: box;
				padding: 5px;
			}
			.list-view li {
				-webkit-box-flex: 1;
				box-flex: 1;
				margin: 0 5px;
				border: 1px solid #dfdfdf;
				padding: 5px;
			}
			.list-view li img {
				width: 100%;
			}
			.list-view li p {
				color: #333;
				font-size: 14px;
			}
			.list-view li span {
				color: #ff4040;
				font-size: 16px;
			}
			.bottom-title {
				margin: 20px auto 0;
				width: 200px;
				height: 12px;
				border-bottom: 1px solid #6ac82c;
				text-align: center;
			}
			.bottom-title span {
				color: #333;
				padding: 0 10px;
				background: #fff;
			}
			.bottom-icon {
				display: box;
				display: -webkit-box;
			}
			.bottom-icon div {
				-webkit-box-flex: 1;
				box-flex: 1;
				text-align: center;
				margin: 20px 0;
			}
			.bottom-icon div span {
				display: inline-block;
				width: 50px;
				height: 50px;
			}
			.bottom-icon div:nth-child(1) span {
				background: url('../image/icon1.png') center no-repeat;
				background-size: 90%;
			}
			.bottom-icon div:nth-child(2) span {
				background: url('../image/icon2.png') center no-repeat;
				background-size: 90%;
			}
			.bottom-icon div:nth-child(3) span {
				background: url('../image/icon3.png') center no-repeat;
				background-size: 80%;
			}
			.bottom-icon div:nth-child(4) span {
				background: url('../image/icon4.png') center no-repeat;
				background-size: 90%;
			}
			.bottom-icon div p {
				color: #666;
				font-size: 14px;
			}
            .left-btn{
                margin-right: 15px;
            }
            #main{
                opacity: 0;
                transition: all 0.5s ease;
            }
            .mask{
                width: 100px;
                height: 100px;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                position: absolute;
            }
            .loader{
                width: 50px;
                height: 50px;
                left: 18px;
                top: 20px;
                position: absolute;
            }
            .loader-inner div{
                width: 60px;
                height: 60px;
                background-color: #6ac82c;
            }
		</style>
	</head>
	<body>
    <div class="mask">
        <div class="loader">
            <div class="loader-inner ball-scale">
                <div></div>
            </div>
        </div>
    </div>
    <div id="main">
    <div id="top-div"></div>
    <header id="header" class="aui-bar aui-bar-nav">
        <div id="header-title" class="aui-title">
            好农
        </div>
        <a href="../html/search.html" class="aui-pull-right left-btn"> <span class="aui-iconfont aui-icon-search"></span> </a>
    </header>
		<div class="swiper-container" onclick="openTopFrame1()">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="../image/banner.png" />
				</div>
				<div class="swiper-slide">
					<img src="../image/banner.png" />
				</div>
				<div class="swiper-slide">
					<img src="../image/banner.png" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<div class="three-icon">
			<div onclick="openTopFrame1()">
				<span></span>
				<p>
					每日抢鲜
				</p>
			</div>
			<div onclick="openTopFrame2()">
				<span></span>
				<p>
					企业采购
				</p>
			</div>
			<div onclick="openTopFrame3()">
				<span></span>
				<p>
					好农特惠
				</p>
			</div>
		</div>
		<div class="content-padded">
			<div class="title">
				<div class="aui-pull-left">
					好农今日抢鲜
				</div>
				<div class="aui-pull-right">
					更多 <span class="aui-iconfont aui-icon-right"></span>
				</div>
			</div>
		</div>
		<ul class="list-view">
			<li>
				<img src="../image/img1.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img2.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<ul class="list-view">
			<li>
				<img src="../image/img3.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img4.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<div class="content-padded">
			<div class="title">
				<div class="aui-pull-left">
					好农也别推荐
				</div>
				<div class="aui-pull-right">
					更多 <span class="aui-iconfont aui-icon-right"></span>
				</div>
			</div>
		</div>
		<ul class="list-view">
			<li>
				<img src="../image/img5.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img6.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<ul class="list-view">
			<li>
				<img src="../image/img7.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img8.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<div class="bottom-title">
			<span>我们的服务</span>
		</div>
		<div class="bottom-icon">
			<div>
				<span></span>
				<p>
					绿色健康
				</p>
			</div>
			<div>
				<span></span>
				<p>
					精选生鲜
				</p>
			</div>
			<div>
				<span></span>
				<p>
					超值低价
				</p>
			</div>
			<div>
				<span></span>
				<p>
					同城配送
				</p>
			</div>
		</div>

    <footer class="aui-nav" id="footer">
        <ul class="aui-bar-tab">
            <li class="active">
                    <span class="footer-icon footer-icon1"></span>
                    <p>
                        首页
                    </p>
            </li>
            <li>
                <a href="../html/frame_tab_2.html">
                <span class="footer-icon footer-icon2"></span>
                <p>
                    产品分类
                </p></a>
            </li>
            <li> <a href="../html/frame_tab_3.html">
                <span class="footer-icon footer-icon3"></span>
                <p>
                    购物车
                </p></a>
            </li>
            <li><a href="../html/frame_tab_4.html">
                <span class="footer-icon footer-icon4"></span>
                <p>
                    个人中心
                </p></a>
            </li>
        </ul>
    </footer>
    <div id="bottom-div"></div>
    </div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript" src="../script/swiper.min.js"></script>
	<script type="text/javascript">
        window.onload=function(){
            setTimeout(function(){
                $('.mask').css('display','none');
                $('#main').css('opacity','1');
            },250)
        };
        var mySwiper = new Swiper('.swiper-container', {
            loop : 'loop', //轮播循环
            autoplay : 2000, //可选选项，自动滑动
            // 如果需要分页器
            pagination : '.swiper-pagination',
            speed : 400 //滑动速度
        });
		function openTopFrame1() {
			window.location.href='../html/top-frame1.html'
		}
		function openTopFrame2() {
            window.location.href='../html/top-frame2.html'
		}
		function openTopFrame3() {
            window.location.href='../html/top-frame3.html'
		}
		$('.list-view li').click(function() {
            window.location.href='../html/detail.html'
		})
	</script>
</html>